<template>
    <!-- 头像上传组件 -->
      <!-- 自定义样式类名 -->
       <!-- 上传接口（示例地址，实际需替换为真实接口） -->
         <!-- 不显示文件列表 -->
            <!-- 关闭自动上传，需手动触发 -->
                <!-- 文件选择后的回调函数 -->
    <!-- <el-upload
        class="avatar-uploader"               
        action="https://jsonplaceholder.typicode.com/posts/"  
        :show-file-list="false"               
        :auto-upload="false"                 
        :on-change="handleChange"           
    > -->
        <!-- 已上传头像时显示图片 -->
           <!-- 根据props.avatar存在性判断是否显示 -->
              <!-- 动态设置图片源（处理后的路径） -->
               <!-- 头像样式类 -->
        <!-- <img
            v-if="props.avatar"              
            :src="uploadAvatar"             
            class="avatar"                    
        /> -->
        <!-- 未上传头像时显示上传图标 -->
           <!-- 无头像时显示 -->
             <!-- 上传图标样式类 -->
        <!-- <el-icon
            v-else                          
            class="avatar-uploader-icon"     
        > -->
            <!-- <Plus />                          加号图标 -->
        <!-- </el-icon> -->
    <!-- </el-upload> -->
</template>

<script setup>
// 引入Element Plus图标组件
// import { Plus } from "@element-plus/icons-vue";
// 引入Vue组合式API
// import { defineEmits, defineProps, computed } from 'vue'

// 定义组件接收的props
// const props = defineProps({
//     avatar: String // 父组件传递的头像路径（字符串类型）
// })

// // 定义子组件向父组件传递的事件
// const emit = defineEmits(["kerwinchange"])

// // 计算属性：处理头像路径（区分Blob对象和服务器路径）
// const uploadAvatar = computed(() => 
//     // 若路径包含"blob"（本地临时路径），直接使用；否则拼接服务器地址
//     props.avatar.includes("blob") ? props.avatar : "http://localhost:3000" + props.avatar
// );

// // 文件选择后的处理函数
// const handleChange = (file) => {
//     // 向父组件传递选中的文件原始对象（包含文件二进制数据）
//     emit("kerwinchange", file.raw)
// };
</script>

<style lang="scss" scoped>


// ::v-deep .el-upload {
//   border: 1px dashed #d9d9d9;
//   border-radius: 6px;
//   cursor: pointer;
//   position: relative;
//   overflow: hidden;
//   transition: var(--el-transition-duration-fast);
// }

// ::v-deep .el-upload:hover {
//   border-color: var(--el-color-primary);
// }

// ::v-deep .el-icon.avatar-uploader-icon {
//   font-size: 28px;
//   color: #8c939d;
//   width: 178px;
//   height: 178px;
//   text-align: center;
// }
// .avatar {
//   width: 178px;
//   height: 178px;
// }
</style>